import React, { Component } from 'react';
import { good_goodinfo, good_fav, shopcart_add, good_unfav } from '../utils/api'
import { StarOutlined, ShareAltOutlined, ShoppingCartOutlined, LeftOutlined } from '@ant-design/icons'
import { Skeleton, Toast } from 'antd-mobile';
import { connect } from 'react-redux'
import { create_fav, create_request_fav } from '../store/actionCreators/index'
import './goods.scss'
class Goods extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goods: [],
            salesPrice: [],
            fav: false
        }
    }
    componentDidMount() {
        var id = this.props.location.state.goodid
        good_goodinfo({ goodid: id }).then((res) => {
            console.log(res.data)
            this.setState({
                goods: res.data.goodinfo,
                salesPrice: res.data.goodinfo.salesPrice
            })
        })
        var index = this.props.count.findIndex((item) => {
            return item.id == id
        })
        if (index != -1) {
            this.setState({
                fav: true
            })
        }
    }
    render() {
        return (
            <div>
                {
                    this.state.goods.length == 0 ?
                        <>
                            <Skeleton.Title animated />
                            <Skeleton.Paragraph lineCount={5} animated />
                        </> :
                        <div>
                            <div className="sousuo">
                                <div className="title_r">
                                    <LeftOutlined onClick={this.back} />
                                    <h1>商品详情</h1>
                                    <span>......</span>
                                </div>
                            </div>
                            <div className="goods" >
                                <img src={this.state.goods.pic} alt="" />
                                <p className='p1'>{this.state.salesPrice.name}￥<span>{this.state.salesPrice.value}</span></p>
                                <div className="goodname">
                                    <p>{this.state.goods.name}</p>
                                </div>
                            </div>
                            <div className='goodtab'>
                                <div onClick={() => this.collect(this.state.goods.id)} className={this.state.fav ? 'fav' : ''}>
                                    <StarOutlined />
                                    <p>收藏</p>
                                </div>
                                <div>
                                    <ShareAltOutlined />
                                    <p>分享</p>
                                </div>
                                <div onClick={this.gocart}>
                                    <ShoppingCartOutlined />
                                    <p>购物车</p>
                                </div>
                                <div className="buy">
                                    <span onClick={() => this.add(this.state.goods.id)}>加入购物车</span>
                                    <span>立即购买</span>
                                    {this.props.arr}
                                </div>
                            </div>
                        </div>
                }
            </div>
        )
    }
    gocart = () => {
        this.props.history.push('/index/car')
    }
    back = () => {
        this.props.history.go(-1)
    }
    collect(id) {
        if (this.state.fav) {
            this.setState({
                fav: false
            })
            var user = localStorage.getItem("userid")
            var goodid = this.props.location.state.goodid
            good_unfav({ userid: user, goodid }).then((res) => {
                Toast.show({
                    icon: 'success',
                    content: '已取消收藏',
                })
            })
        } else {
            var user = localStorage.getItem("userid")
            good_fav({ userid: user, goodid: this.props.location.state.goodid }).then((res) => {
                if (res.data.code == 200) {
                    Toast.show({
                        icon: 'success',
                        content: '已收藏',
                    })
                    this.props.fav_request(user)
                    console.log(this.props.count)
                    this.setState({
                        fav: true
                    })
                } else {
                    Toast.show({
                        icon: 'filed',
                        content: '收藏失败',
                    })
                }
            })
        }
    }

    add(itemid) {
        var id = localStorage.getItem("userid")
        shopcart_add({ userid: id, goodid: itemid }).then((res) => {
            if (res.data.code == 200) {
                Toast.show({
                    icon: 'success',
                    content: '已加入购物车',
                })
            }
        })
    }
}

export default connect(
    (state) => {
        return {
            count: state.fav
        }
    },
    (dispatch) => {
        return {
            fav: function (payload) {
                dispatch(create_fav(payload))
            },
            fav_request: function (payload) {
                dispatch(create_request_fav(payload))
            }
        }
    }
)(Goods)